<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>Cocos Creator | qksg</title>

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
    content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1" />

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />

  <!-- force screen orientation on some browser -->
  <meta name="screen-orientation" content="portrait" />
  <meta name="x5-orientation" content="portrait">

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .body-box {
      width: 100%;
      height: 100%;
      min-width: 300px;
      min-height: 400px;
      background: url('./bg.png') no-repeat fixed center center;
      background-size: 100% 100%;
      overflow: auto;
    }

    .iframe-box {
      max-width: calc(375 / 667 * 100vh);
      height: 100%;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0);
    }

    .iframe-box .iframe {
      display: block;
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      height: 100%;
      /* background:#00b7ff; */
    }
  </style>
</head>

<body class="body-box">
  <div class="iframe-box">
    <iframe class="iframe" id="gameFrame"
      src="./index.html"
      frameborder="0">
      <p>Your browser does not support iframes.</p>
    </iframe>
  </div>
</body>

<script type="text/javascript">
  var u = navigator.userAgent
  if (/mobile/i.test(u)) {
    console.log('手机端')
    var bodyBox = document.querySelector('.body-box')
    bodyBox.style.height = document.body.clientHeight + 'px'
    var iframeBox = document.querySelector('.iframe-box')
    iframeBox.style.maxWidth = '100%'
  }
  window.addEventListener('message', e => {
    const payload = typeof e.data === 'string' ? { action: e.data } : e.data || {};
    const { action, params } = payload;
    console.log('收到SDK 调用，进行转发:', payload);

    if(action.indexOf('_SUCCESS') !== -1 || action === 'PAY_NOTIFY'){
      const gameFrame = document.querySelector('#gameFrame');
      const gameWin = gameFrame.contentWindow;
      gameWin.postMessage(payload, '*');
    }else{
      window.parent.postMessage(payload, '*');
    }
  });


</script>

</html>